<template>
  <el-dialog
    :visible="visible"
    :close-on-click-modal="false"
    :before-close="handleClose"
    :close="handleClose"
    :show-close="!showMobilePage"
    :class="{'global-mobile-dialog':showMobilePage}"
    class="normal-common-dialog-size"
  >
    <Title title="发文采集效果设置" style="margin-bottom:24px" />
    <div>
      <div :class="{'mobile-center':showMobilePage}" class="center mb22">
        <div class="left-title">
          <span>发文信息</span>
          <el-tooltip placement="top">
            <div slot="content">每个账号{{ formData.normalFrequency }}小时采集一次，采集最近{{ formData.validCollectionDays }}天内发布的所有新发文</div>
            <tipIcon is-diy class="ml5 tip"/>
          </el-tooltip>
        </div>
        <div class="center flex-wrap">
          <div class="mr16">
            <span>正常号采集频率:</span>
            <el-input-number v-model="formData.normalFrequency" :step="0.5" :min="0.5" :max="72" size="small" step-strictly />
            <span>小时</span>
          </div>
          <div class="ml50">
            <span>正常号夜间采集频率:</span>
            <el-input-number v-model="formData.nightFrequency" :step="0.5" :min="0.5" :max="6" size="small" step-strictly />
            <span>小时</span>
          </div>
          <div class="mr16">
            <span>夜间时段:</span>
            <el-time-picker
              v-model="formData.nightStart"
              value-format="HH:mm"
              format="HH:mm"
              range-separator="-"
              placeholder="请选择"
              size="small"
              class="width120" />
            <span>-</span>
            <el-time-picker
              v-model="formData.nightEnd"
              value-format="HH:mm"
              format="HH:mm"
              range-separator="-"
              placeholder="请选择"
              size="small"
              class="width120" />
          </div>
          <div>
            <span>闲置/禁言号采集频率:</span>
            <el-input-number v-model="formData.forbiddenFrequency" :step="0.5" :min="0.5" :max="168" size="small" step-strictly />
            <span>小时</span>
          </div>
        </div>
      </div>
      <div class="center mb22">
        <div class="left-title">
          <span>异常状态</span>
          <el-tooltip placement="top">
            <div slot="content">每个账号{{ formData.abnormalFrequency }}小时采集一次，采集最近{{ formData.validCollectionDays }}天内的所有发文的最新状态</div>
            <tipIcon is-diy class="ml5 tip"/>
          </el-tooltip>
        </div>
        <div class="center flex-wrap">
          <div>
            <span>采集频率:</span>
            <el-input-number v-model="formData.abnormalFrequency" :step="1" :min="6" :max="168" size="small" step-strictly />
            <span>小时</span>
          </div>
        </div>
      </div>
      <div class="center mb22">
        <div class="left-title align-center" style="margin-top:0;">
          <span>采集有效期</span>
          <el-tooltip placement="top">
            <div slot="content">发文采集效果的采集发布时间范围：最近{{ formData.validCollectionDays }}天内</div>
            <tipIcon is-diy class="ml5 tip"/>
          </el-tooltip>
        </div>
        <div class="center flex-wrap">
          <div>
            <el-input v-model="formData.validCollectionDays" :disabled="true" class="width120" size="small" />
            <span>日</span>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-center">
      <el-button :disabled="loading" :loading="loading" type="primary" size="small" @click="handleSubmit">确定</el-button>
      <el-button type="info" size="small" class="cancel-btn-style" @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
import { editAccountCollection } from '@/api/accounts';
import ElMessage from '@/utils/message';
import { mapState } from 'vuex';

export default {
  components: { Title },
  data() {
    return {
      formData: {
        normalFrequency: 0.5,
        nightFrequency: 2,
        forbiddenFrequency: 24,
        abnormalFrequency: 24,
        validCollectionDays: 7,
        nightStart: '',
        nightEnd: ''
      },
      visible: false,
      loading: false
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    openDialog(val) {
      if (val) {
        const temp = JSON.parse(JSON.stringify(val));
        this.formData = temp;
      }
      this.visible = true;
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    handleClose() {
      this.visible = false;
      this.cancelLoading();
    },
    handleSubmit() {
      const params = JSON.parse(JSON.stringify(this.formData));
      editAccountCollection(params).then(res => {
        if (res.code === 200) {
          ElMessage.success('设置成功！');
          this.$emit('update');
          this.handleClose();
        }
      }).catch(err => {
        console.log(err);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.center {
  display: flex;
  .mr16 {
    margin: 0 20px 16px 0;
    ::v-deep .el-range-separator{
      width: 20px;
    }
  }
  .ml50 {
    margin-left: 50px;
  }
  .left-title {
    width: 90px;
    display: flex;
    flex-shrink: 0;
    margin: 7px 12px 0 0;
    align-items: flex-start;
    justify-content: flex-end;
    span {
      display: inline-block;
    }
    .tip {
      margin-top: 3px;
    }
  }
}
.flex-wrap {
  flex-wrap: wrap;
}
.mb22 {
  margin-bottom: 22px;
}
.flex-center {
  display: flex;
  justify-content: center;
}
.width120 {
  width: 120px;
}
.mobile-center {
  .ml50 {
    margin: 0 0 16px;
  }
}
.align-center {
  align-items: center !important;
}
</style>
